<template>
  <div class="image-container">
    <!-- 卡片布局 -->
    <el-card class="box-card">
      <!-- 卡片标题头 -->
      <div slot="header">
        <!-- 面包屑 -->
        <el-breadcrumb>
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 正文区域 -->
      <div style="padding-bottom: 20px">
        <!-- 第一排: 单选按钮 -->
        <el-radio-group size="mini" v-model="radio1">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="收藏"></el-radio-button>
        </el-radio-group>

        <!-- 上传按钮 -->
        <el-button
          @click="dialogVisible = true"
          type="success"
          size="mini"
          style="float: right"
          >上传图片素材
        </el-button>
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="10">
        <el-col
        class="img_item"
        :xs="12"
        :sm="6"
        :md="6"
        :lg="4"
        v-for="obj in listArr"
        :key="obj.id"
        >
          <el-image
            style="height: 180px; width: 100%"
            :src="obj.url"
            fit="cover"
          ></el-image>
          <div class="option">
            <span
            class="el-icon-star-on"
            :style="{color: obj.is_collected ? 'red': ''}"
            @click="collectedFn(obj)"
            ></span>
            <span class="el-icon-delete" @click="delFn(obj)"></span>
          </div>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="hPageChange"
        @size-change="handleSizeChange"
        :current-page="reqParams.page"
        :page-size="reqParams.per_page"
        :total="total"
        :page-sizes="[8, 12, 16, 20]"
      >
      </el-pagination>

      <!-- 对话框 -->
      <el-dialog
        title="提示"
        :append-to-body="true"
        :visible.sync="dialogVisible"
      >
        <!--
        action：上传地址
        show-file-list:false，不需要显示已上传的文件列表
        on-success： 上传成功之后的回调函数
        before-upload: 上传之前对文件进行检测
        name: 设置上传的文件参数名，要与后端接口中的要求一致。
      -->
        <el-upload
          class="avatar-uploader"
          action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
          :headers="headers"
          :on-success="hUploadSuccess"
          name="image"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <!-- 如果当前有预览地址就说明图片上传成功了。 -->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { userImageListAPI, collectedImgAPI, delUserImgAPI } from '@/api'
export default {
  name: 'images',
  data () {
    return {
      listArr: [], // 图片素材数据
      reqParams: { // 收藏/分页的参数对象
        collect: false, // 全部
        page: 1, // 页码
        per_page: 8 // 默认要8个
      },
      total: 0, // 总数据量
      radio1: '全部', // 关联标签栏文字
      dialogVisible: false, // 弹窗层上来不显示
      headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem('token')
      },
      imageUrl: '' // 上传成功的地址
    }
  },
  watch: {
    radio1 (newVal) {
      this.reqParams.collect = newVal !== '全部'
      this.getImgListFn()
    }
  },
  methods: {
    async getImgListFn () { // 调用数据
      const [err, res] = await userImageListAPI(this.reqParams)
      if (err) return
      this.listArr = res.data.data.results
      this.total = res.data.data.total_count
    },
    hPageChange (page) { // 分页点击
      this.reqParams.page = page
      this.getImgListFn()
    },
    handleSizeChange (val) { // 每页显示多少条
      this.reqParams.per_page = val
      this.getImgListFn()
    },
    async collectedFn (obj) { // 收藏点击
      // 告诉后台 我要收藏哪个图片, 把数据重新获取一遍 (默认要获取第一页的)
      this.reqParams.page = 1
      await collectedImgAPI(obj.id, { collect: !obj.is_collected }) // 取出当前图片的收藏
      // 状态, 取反通知后台
      this.getImgListFn() // 再调用获取数据的接口-让网页更新最新的状态
    },
    beforeAvatarUpload (file) {
      // 文件上传之前 (先判断验证下)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2 // 1Kb = 1024byte  (1byte=8Bit(二进制))
      // 例如 file.size的值 3000000 / 1024 / 1024的值 2.8Mb
      // 一般说的百兆指的B, 真正的网速 是b, 除以8才是真正的网速
      if (!isJPG) {
        this.$message.error('图片只能是 JPG 格式 / PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2Mb!')
      }

      return isJPG && isLt2M // 如果返回true就开始上传, 如果返回false则停止上传
    },
    hUploadSuccess (res, file) {
      // res后台返回响应结果
      // file组件内上传的文件
      // 本地预览
      // URL.createObjectURL(文件对象) 原地返回纯前端本地浏览地址 URL.createObjectURL(file.raw)

      // 问题: 上传地址还要作为封面交给ArticleAdd.vue, 所以得使用服务器上的地址才可以
      // 解决: 不能用file得用res
      this.imageUrl = res.data.url

      this.$message({
        message: '上传图片成功了',
        type: 'success',
        onClose: () => {
          this.dialogVisible = false // 关闭弹出层
          this.imageUrl = '' // 上传关闭后-弹出层图片清空
        },
        duration: 1500
      })

      this.getImgListFn() // 调用接口-让素材库也马上更新最新图片(这样马上切回来才能看到)
    },
    async delFn (obj) {
      const [err] = await delUserImgAPI(obj.id) // await遇到网络请求完全ok才会往下走
      if (err) return
      this.$message({
        message: '图片删除成功了',
        type: 'success',
        duration: 1500
      })
      this.getImgListFn()
    }
  },
  created () {
    this.getImgListFn()
  }
}
</script>

<style scoped lang="less">
.img_item {
  position: relative;
  box-sizing: border-box;
}
.option {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  span {
    margin: 0 30px;
    cursor: pointer;
  }
}
.avatar-uploader {
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
